<template>
  <div>
      <div class="MyFont" style="margin:20px;font-size:18px">
          {{ upload.caption }}
      </div>
      <el-progress 
        type="circle" 
        :percentage="upload.percent" 
        :stroke-width="12"
        :width="160"
        :color="upload.color"
        :status="upload.status"
      >
        <template #default="{ percentage }">
            <div align="center">
              <div class="MyFont" style="font-size: 32px;margin: auto auto 0;padding: auto auto 0">{{ percentage }}%</div>
              <div class="MyFont" style="font-size: 15px;margin: 0 auto auto;">{{ upload.ProgressCaption }}</div>
            </div>

        </template>
      </el-progress>
      <br><br>
      <div style="display:flex;justify-content: space-around;" align="center">
        <el-upload
          class="upload-demo"
          :action="action"
          :limit="1"
          :on-success="upload.handleSuccess"
          :on-error="upload.handleError"
          :on-progress="upload.handleProgress"
          :before-upload="upload.handleBeforeUpload"
          :on-exceed="upload.handleOnExceed"
          :on-remove="upload.handleOnRemove"
        >
          <button class="button" style="font-size:13px;">上传作业</button>
        </el-upload>

      </div>
  </div>
</template>

<script>
import { useStore } from "vuex"
import { reactive, ref, onMounted, watch, computed } from "vue"
import { ElNotification } from "element-plus"

export default {
 name : "upload",
 props : ['homeworkID', "type"],
 setup(props) {
    let homeworkID = props.homeworkID
    let type = props.type
    let store = useStore()

    const typeReg = {
      "pdf" : /([\s]*?)(.(pdf))$/ ,
      "zip" : /([\s]*?)(.(zip|rar|tar|xyz|7z|cab|iso|arj|z))$/,
      "source" : /([\s]*?)(.(py|cpp|java|c|js|ts|css|vue|v|tex|latex|go|php|sql|cs|html|lua|pl|r|rs|scala))$/,
      "word" : /([\s]*?)(.(doc|docx))$/,
      "ppt" : /([\s]*?)(.(ppt|pptx|keynote))$/,
      "data" : /([\s]*?)(.(csv|tsv|txt|yaml|json|yml))$/,
      "picture" : /([\s]*?)(.(png|jpg|jepg|svg|esp|pdf|gif))$/,
      "model" : /([\s]*?)(.(pth|pkl|caffe|onnx))$/,
      "config" :  /([\s]*?)(.(json|yaml|yml|protcbuf))$/,
      "*" : /([\s]*?)/
    }

    const typeCaption = {
      "pdf" : "pdf文件(pdf)",
      "zip" : "压缩包(zip|rar|tar|xyz|7z|cab|iso|arj|z)",
      "source" : "代码源文件(py|cpp|java|c|js|ts|css|vue|v|tex|latex|go|php|sql|cs|html|lua|pl|r|rs|scala)",
      "word" : "word文档(doc|docx)",
      "ppt" : "幻灯片(ppt|pptx|keynote)",
      "data" : "数据或者文本文件(csv|tsv|txt|yaml|json|yml)",
      "picture" : "图像文件(png|jpg|jepg|svg|esp|pdf|gif)",
      "model" : "模型参数文件(pth|pkl|caffe|onnx)",
      "config" : "配置文件(json|yaml|yml|protcbuf)",
      "*" : "任意文件"
    }

    let upload = reactive({
        file : undefined,
        caption : computed(() => upload.done ? "已上传完成" : "请选择文件上传"),
        percent : 0,
        done : false,
        color : computed(() => upload.done ? '' : 'var(--mainColor)'),
        status : computed(() => upload.done ? 'success' : ''),
        ProgressCaption : computed(() => upload.done ? 'Success!' : 'Progressing'),
        handleSuccess(response) {
          if (response.code == 0) {
            upload.percent = 100
            upload.done = true
          }
          else {
            ElNotification({title: "Oops", message: "发生错误:" + response.msg})
            upload.percent = 0
            upload.done = false
          }
        },
        handleError(error) {
          ElNotification({title : "上传失败", message: "失败原因: " + error})
        },
        handleProgress(progressEvent) {

          upload.percent = Math.floor(progressEvent.percent)
        },
        handleBeforeUpload(rawFile) {
          let name = rawFile.name
          upload.done = false
          if (typeReg[type].test(name)) {
            return true
          }
          else {
            ElNotification({
              title : "上载文件类型不对哦",
              message : "你应该上传的文件类型和后缀名为: " + typeCaption[type]
            })
            return false
          }
        },
        handleOnExceed(files) {
          ElNotification({title : "Oops", message: "先去除当前已经上传的文件！"})
        },
        handleOnRemove() {
          upload.done = false
          upload.percent = 0
        }
    })

    let action = "/api/submit?homeworkID=" + homeworkID

    return {
        upload,
        type,
        action
    }
 }
}
</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.MyFont {
  font-family: "Roboto Slab", serif;
}

</style>